<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SQL编辑器</title>
    <link rel="stylesheet" th:href="@{/statics/plugins/sqlEditor/css/codemirror.css}" />
    <link rel="stylesheet" th:href="@{/statics/plugins/sqlEditor/css/theme/dracula.css}" />
    <link rel="stylesheet" th:href="@{/statics/plugins/sqlEditor/css/show-hint.css}" />
    <link rel="stylesheet" th:href="@{/statics/plugins/sqlEditor/js/jquery-easyui/themes/default/easyui.css}">
    <link rel="stylesheet" th:href="@{/statics/plugins/sqlEditor/js/layui/css/layui.css}">

    <link rel="stylesheet" th:href="@{/statics/plugins/sqlEditor/css/index.css}" />
    <script type="text/javascript">
        var baseURL = "../../";
        //var baseUrl = "https://www.easy-mock.com/mock/5cdd370d2835327c57e2e575/test/";
    </script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/jquery-easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/jquery-easyui/locale/easyui-lang-zh_CN.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/editor/codemirror.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/editor/sublime.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/editor/sql.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/editor/sql-hint.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/editor/show-hint.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/editor/formatting.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/editor/sql-formatter.min.js}"></script>
    <script type="text/javascript" th:src="@{/statics/plugins/sqlEditor/js/layui/layui.js}"></script>
    <style>
        .layui-container{
            width: 100%;
            overflow: hidden;
        }
        .card{
            height: 99%;
            margin-top: unset;
        }
        .layui-col-xs9{
            width: 77%;
        }
        .layui-container{
            padding: unset;
        }
    </style>
</head>
<body style="height: 100%">
<div class="layui-container" style="height: 100%">

    <div class="layui-row" style="height: 100%">
        <div class="card left-card">
            <div class="tree-div">
                <ul id="dstable"  fit="true" border="false"></ul>
            </div>
        </div>
        <div class="layui-col-xs9 card right-card">
            <div class="layui-row tools">
                <button class="layui-btn layui-btn-primary  layui-btn-xs" id="save">
                    <img th:src="@{/statics/plugins/sqlEditor/image/save.png}" alt="">保存</button>
                <button class="layui-btn layui-btn-primary  layui-btn-xs" id='format'>
                    <img th:src="@{/statics/plugins/sqlEditor/image/format.png}" alt="">美化SQL</button>
                <button class="layui-btn layui-btn-primary  layui-btn-xs" id='execute'>
                    <img th:src="@{/statics/plugins/sqlEditor/image/run.png}" alt="">执行</button>
                <button class="layui-btn layui-btn-primary  layui-btn-xs" id='stop' onclick="stopLoadData()">
                    <img id="stopImg"
                         th:src="@{/statics/plugins/sqlEditor/image/stop0.png}" alt="">停止</button>
            </div>
            <div class="layui-row sql-div">
                <textarea id="code"></textarea>
                <!-- 负责拖拽 -->
                <div id="handle" style="display: none"> </div>

            </div>
            <div class="layui-row data-div">
                <div class="layui-tab h100" style="display: none"  lay-filter="result">
                    <ul class="layui-tab-title">
                        <li lay-id="info" >信息</li>
                        <li class="layui-this" lay-id="data" >结果
                            <img id="loading" style="display: none" th:src="@{/statics/plugins/layer/layim/loading.gif}" alt="">
                        </li>
                    </ul>
                    <div class="layui-tab-content h100">

                        <div class="layui-tab-item data-info h100">
                            <p id="resultCode"></p>
                            <p id="resultMsg"></p>
                            <p id="resultTime"></p>
                        </div>
                        <div class="layui-tab-item layui-show data-list h100">
                            <table id="sqldata"></table>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
</body>
<script th:src="@{/statics/plugins/sqlEditor/js/index.js}"></script>
</body>
</html>